<template>
  <span>
    <span v-if="keyword && text.includes(keyword)">
      <span>{{ text.substr(0, keywordIndex) }}</span>
      <span style="color: #f50">{{ keyword }}</span>
      <span>{{ text.substr(keywordIndex + keyword.length) }}</span>
    </span>
    <span v-else>{{ text }}</span>
  </span>
</template>

<script>

export default {

  name: 'HighlightText',

  data () {
    return {
    }
  },

  computed: {
    keywordIndex () {
      return this.text.indexOf(this.keyword)
    }
  },

  props: {
    text: {
      type: String,
      default: '',
      required: true
    },
    keyword: {
      type: String,
      default: null,
      required: true
    }
  }

}
</script>
